<template>
  <div v-if="showDisplay" class="common-error-container">
    <a-empty 
      :description="displayMessage" 
      :image="image"
    >
      <template #extra>
        <a-button type="primary" @click="handleRetry" :loading="loading">
          {{ loading ? t('common.loading') : t('common.reload') }}
        </a-button>
      </template>
    </a-empty>
  </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { Empty } from 'ant-design-vue'

// 定义组件名称
defineOptions({
  name: 'Empty'
})

// 定义组件属性
const props = defineProps({
  // 加载状态
  loading: {
    type: Boolean,
    default: false
  },
  // 错误状态
  loadError: {
    type: Boolean,
    default: false
  },
  // 错误信息
  errorMessage: {
    type: String,
    default: ''
  },
  // 数据列表
  dataList: {
    type: Array,
    default: () => []
  },
  // 空数据提示文本的i18n键名
  emptyTextKey: {
    type: String,
    default: 'common.emptyData'
  },
  // 是否使用简单图片
  useSimpleImage: {
    type: Boolean,
    default: true
  }
})

// 定义事件
const emit = defineEmits(['retry'])

// 国际化
const { t } = useI18n()

// 图片选择
const image = computed(() => props.useSimpleImage ? Empty.PRESENTED_IMAGE_SIMPLE : undefined)

// 是否显示此组件
const showDisplay = computed(() => 
  props.loadError || (props.dataList.length === 0 && !props.loading)
)

// 显示消息
const displayMessage = computed(() => 
  props.loadError ? props.errorMessage : t(props.emptyTextKey)
)

// 重试处理
const handleRetry = () => {
  emit('retry')
}
</script>

<style lang="scss" scoped>
.common-error-container {
  margin-top: 20px;
  text-align: center;
}
</style> 